<template>
  <el-badge v-if="theme.showNotice" type="danger" :value="badge">
    <el-popover placement="bottom" trigger="hover" :width="300">
      <template #reference>
        <vab-icon icon="notification-line" />
      </template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="translateTitle('通知')" name="notice">
          <div class="notice-list">
            <el-scrollbar>
              <ul>
                <li v-for="(item, index) in notices" :key="index">
                  <el-avatar :size="45" :src="item.image" />
                  <span v-html="item.notice" />
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="translateTitle('邮件')" name="email">
          <div class="notice-list">
            <el-scrollbar>
              <ul>
                <li v-for="(item, index) in notices" :key="index">
                  <el-avatar :size="45" :src="item.image" />
                  <span>{{ item.email }}</span>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="notice-clear" @click="handleClearNotice">
        <el-button type="text">
          <vab-icon icon="close-circle-line" />
          <span>{{ translateTitle('清空消息') }}</span>
        </el-button>
      </div>
    </el-popover>
  </el-badge>
</template>

<script>
  import {
    computed,
    defineComponent,
    getCurrentInstance,
    nextTick,
    ref,
  } from 'vue'
  import { useStore } from 'vuex'
  import { translateTitle } from '@/utils/i18n'
  import { getList } from '@/api/notice'

  export default defineComponent({
    name: 'VabNotice',
    setup() {
      const store = useStore()

      const theme = computed(() => store.getters['settings/theme'])

      const { proxy } = getCurrentInstance()

      const activeName = ref('notice')
      const notices = ref()
      const badge = ref()

      const fetchData = async () => {
        const {
          data: { list, total },
        } = await getList()
        notices.value = list
        badge.value = total === 0 ? null : total
      }

      nextTick(() => {
        if (theme.value.showNotice) fetchData()
      })

      const handleClick = () => {
        fetchData()
      }

      const handleClearNotice = () => {
        badge.value = null
        notices.value = []
        proxy.$baseMessage('清空消息成功', 'success', 'vab-hey-message-success')
      }

      return {
        badge,
        theme,
        notices,
        fetchData,
        activeName,
        handleClick,
        translateTitle,
        handleClearNotice,
      }
    },
  })
</script>

<style lang="scss" scoped>
  :deep() {
    .el-tabs__active-bar {
      min-width: 28px;
    }
  }

  .notice-list {
    height: 29vh;

    ul {
      padding: 0 15px 0 0;
      margin: 0;

      li {
        display: flex;
        align-items: center;
        padding: 10px 0 10px 0;

        :deep() {
          .el-avatar {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }

        span {
          margin-left: 10px;
        }
      }
    }
  }

  .notice-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0 0;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #e8eaec;

    i {
      margin-right: 3px;
    }
  }
</style>
